<div class="col-md-8 col-md-offset-2">
	<h3 class="header smaller lighter blue">
		<a href="/#/cluster_list">Cluster List</a>
        <span> > </span>
    	<a href="/#/cluster_list?clusterName={{clusterName}}">{{clusterName}}</a>
    	<span> > </span>
    	<span>shards</span>
    </h3>

    <div class="panel panel-primary">
        <header class="panel-heading">
            <div class="row">
                <div class="col-md-6">
    				<a href="/#/cluster_form?clusterName={{clusterName}}&type=retrieve" style="color:white">{{clusterName}}</a>
                </div>
                <div class="col-md-6 text-right">
                    <button type="button" class="btn btn-primary btn-sm" ng-click="preCreateShard()">添加shard</button>
                </div>
            </div>
        </header>
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <td>shard 名称</td>
                <td>sentinel 监控名称</td>
                <td ng-repeat="dc in clusterDcs">{{dc.dcName}}</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="shard in shards">
                <td>{{shard.shardName}}</td>
                <td>{{shard.setinelMonitorName}}</td>
                <td ng-repeat="dc in clusterDcs">{{shard.sentinels[dc.id].sentinelsAddressString}}</td>
                <td>
                    <a ng-click="preDeleteShard(shard.shardName)">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<form class="modal fade form-horizontal" id="createShardModal" tabindex="-1" role="dialog"
      ng-submit="createShard()">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header panel-primary">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <div class="modal-title">
                    <span style="">创建Shard</span>

                </div>
            </div>
            <div class="modal-body form-horizontal">
                <div class="form-group" valdr-form-group>
                    <label class="col-sm-4 control-label">
                        <apollorequiredfiled></apollorequiredfiled>
                        shard 名称</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" ng-model="shard.shardName" ng-required="true" pattern="^[\u4E00-\u9FA5A-Za-z0-9._-]+$"
                        	ng-change="shardNameChange()">
                    </div>
                </div>
                <div class="form-group" valdr-form-group>
                    <label class="col-sm-4 control-label">
                        sentinel 监控名称
                    </label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" ng-model="shard.setinelMonitorName" ng-required="true" pattern="^[\u4E00-\u9FA5A-Za-z0-9._-]+$">
                    </div>
                </div>
				<div class="form-group" valdr-form-group>
                	<div class="col-sm-12">
                        <table ng-table="tableParams" class="table table-striped table-hover">
						<tr ng-repeat="dc in clusterDcs">
						<td data-title="'机房'">{{dc.dcName}}</td>
						<td data-title="'Sentinels'">
							<select class="form-control" ng-model="shard.sentinels[dc.id]"
								ng-options="sentinel.sentinelsAddressString for sentinel in sentinels[dc.dcName]">
								<option></option>
							</select>
						</td>
						</tr>
					</table>
                    </div>
                </div>
                <div class="form-group text-center">
                    <p style="font-size:12px">该方式只能创建对称分片的shard，如果需要创建非对称分片的shard,
                        <a style="color:red;font-size:14px" ng-click="gotoUpdateCluster()">请访问集群修改页面</a>
                    </p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary">创建
                </button>
            </div>
        </div>
    </div>
</form>

<xpipeconfirmdialog xpipe-dialog-id="'deleteShardConfirm'" xpipe-title="'删除shard'"
                    xpipe-detail="'您确定删除该shard以及该shard下的所有redis实例吗？'"
                    xpipe-show-cancel-btn="true" xpipe-confirm="deleteShard"></xpipeconfirmdialog>
